<!--接口联调页-->
<template>
  <div>
    <el-form :inline="true" :model="roleForm" ref="roleForm">
      <div class="pc-addBtn-panel" style="margin-top: 10px">
        <el-button size="small" type="primary" @click="toAddRoleFn">添加用户</el-button>
        <el-button size="small" type="primary" :disabled="checkDisabled" @click="batchExportFn">导出</el-button>

        <el-form :model="productForm" label-width="80px">
          <el-form-item label="导入excel">
            <el-upload
              :limit="uploadMaxCount"
              :headers="token"
              :action="uploadImageUrl"
              :data="this.uploadRequest"
              :file-list="imageList"
              accept = ".xls,.xlsx"
              list-type="text"
              :before-upload="beforeAvatarUpload"
              :on-success="checkSuccess"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-exceed="handelExceedFn">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
          <el-dialog :visible.sync="pdfVisible">
            <iframe  :src="'/static/pdf/web/viewer.html?file=' + pdfurls" height="560" width="100%">
            </iframe>
          </el-dialog>
        </el-form>
      </div>
    </el-form>
    <el-table :data="tableData"  border ref="multipleTable" tooltip-effect="dark" stripe @selection-change="handleSelectionChange" :empty-text='emptyText'>
      <el-table-column
        :selectable="selectableFn"
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column type="index" label="序号" min-width="65"></el-table-column>
      <el-table-column prop="status" label="状态" min-width="65">
      </el-table-column>
      <el-table-column prop="userName" label="用户名称" min-width="100">
        <template slot-scope="scope">
          {{scope.row.userName}}
        </template>
      </el-table-column>
      <el-table-column prop="id" label="用户id" min-width="150"></el-table-column>
      <el-table-column prop="mobileNo" label="手机号码" min-width="150"></el-table-column>
      <el-table-column prop="email" label="邮件" min-width="150"></el-table-column>
      <el-table-column prop="remark" label="备注" min-width="200"></el-table-column>
      <el-table-column label="操作" fixed="right" width="200">
        <template slot-scope="scope">
            <el-button type="text" class="pc-textBtn" @click="toModifyRoleFn(scope.row)">编辑</el-button>
            <el-button type="text" class="pc-textBtn-danger"  @click="deleteRoleFn(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pc-pagination-panel">
      <pc-pagination ref="pcPagination" :url="pageUrl.queryUserList" :queryData="roleForm" @on-query="queryCallBackFn">
      </pc-pagination>
    </div>
    <el-dialog :title="dialogName" :visible.sync="isShowEditDialog" size="tiny" @close="isShowEditDialog = false">
      <pc-edit-user :type="methodType" :formData="editRoleData" v-if="isShowEditDialog" ref="editRoleForm"/>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" :loading="$store.getters.getButtonLoading" type="primary" @click="saveRoleFn">确认</el-button>
        <el-button size="small" @click="isShowEditDialog = false">取消</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
  import PcEditUser from '../../edit/index.vue';
  import PcPagination from 'components/form/pagination';
  import PcButton from 'components/form/button';
  import {validateTips} from 'utils/tips';
  export default {
    data () {
      return {
        dialogName: '',
        roleId: '', // 当前操作的角色ID
        isShowEditDialog: false,
        isShowBindUserDialog: false,
        userIdArr: [],
        checkDisabled: true, // 批量删除是否可用
        methodType: '',
        editRoleData: {
        },
        roleForm: {
        },
        tableData: [],
        emptyText: '',
        currentPage: 5,
        disabledDialog: false,
        enableDialog: false,
        deleteDialog: false,
        pageUrl: {
          queryUserList: '/test/user/userList'
        },
        pdfurls: '',
        imageList: [],
        editor: {},
        uploadMaxCount: 4,
        token: {Authorization: 'Bearer ' + this.$store.getters.getAccessToken},
        uploadImageUrl: 'http://api.malicloud.net:8080/test/user/importUser',
        dialogImageUrl: '',
        dialogVisible: false,
        pdfVisible: false,
        productForm: {
          status: 1
        },
        uploadRequest: {
//          fileType: 'picture',
//          filePath: 'malicloud/picture/product/',
//          bucketName: 'malicloud-oss-bucket',
//          file_id: 0
        }
      };
    },
    components: {
      PcPagination, PcEditUser, PcButton
    },
    created () {
    },
    methods: {

      handelExceedFn(files, fileList) {
        this.errorTip(validateTips.UPLOAD_IMG_NUM);
      },
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 5;
        if (!isLt2M) {
          this.errorTip(validateTips.IMG_SIZE);
        }
        return isLt2M;
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        let fileExtension = file.response.data.substring(file.response.data.lastIndexOf('.') + 1);
        if (fileExtension === 'jpg' || fileExtension === 'jpeg' || fileExtension === 'JPG' || fileExtension === 'JPEG' || fileExtension === 'png') {
          this.dialogVisible = true;
          this.pdfVisible = false;
        }
        if (fileExtension === 'pdf') {
          this.pdfVisible = true;
          this.dialogVisible = false;
          this.pdfurls = file.url;
        }
//        let link = document.createElement('a');
//        link.style.display = 'none';
//        link.href = this.dialogImageUrl;
//        link.setAttribute('download', file.name);
//        document.body.appendChild(link);
//        link.click();
      },
      checkSuccess(response, file, fileList) {
        if (response.code !== 0) {
          this.errorTip(response.message);
          return;
        }
        this.imageList = [];
        this.productForm.attachmentIdList = [];
        let _this = this;
        fileList.forEach((item, index) => {
          console.info('item:', item);
          _this.imageList.push(item);
          _this.productForm.attachmentIdList.push(item.attachmentId ? item.attachmentId : item.response.result);
        });
      },
      handleRemove(file, fileList) {
        this.productForm.attachmentIdList = [];
        this.imageList = [];
        let _this = this;
        fileList.forEach((item) => {
          _this.imageList.push(item);
          _this.productForm.attachmentIdList.push(item.attachmentId ? item.attachmentId : item.response.result);
        });
      },
      queryCallBackFn (res) {
        this.tableData = res.result.list;
      },
      queryDataFn () {
        this.$refs.pcPagination.queryListWithPageFn();
      },
      saveRoleFn() {
        this.$refs.editRoleForm.submitForm((res) => {
          this.isShowEditDialog = false;
          this.queryDataFn();
        });
      },
      toAddRoleFn () {
        this.editRoleData = {
        };
        this.dialogName = '添加用户';
        this.methodType = 'ADD';
        this.isShowEditDialog = true;
      },
      toModifyRoleFn (user) {
        this.isShowEditDialog = true;
        this.methodType = 'UPDATE';
        this.dialogName = '编辑用户';
        this.editRoleData = user;
      },
      deleteRoleFn (user) {
        let confirmMsg = '确定删除' + user.userName + '吗? 删除后将不能使用，确定继续删除吗?';
        this.confirmModel(confirmMsg, `/test/user/delete/${user.id}`, null, () => {
          console.info('deleteRoleFn callback');
          this.queryDataFn();
        });
      },
      batchExportFn() {
        this.$http({
          method: 'POST',
          url: '/test/user/export',
          responseType: 'arraybuffer',
          data: this.userIdArr
        }).then((res) => {
          if (res != null) {
            let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' });
            let link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            let fileName = res.headers['content-disposition'].split(';')[2].split('=')[1].replace('"', '');
            link.download = fileName; // fileName;
            link.click();
          }
        });
      },
      closeEditDialog (attr) {
        this[attr] = false;
      },
      handleSelectionChange(roleList) {
        this.userIdArr = [];
        roleList.forEach((item) => {
          this.userIdArr.push(item.id);
        });
        this.checkDisabled = this.userIdArr.length < 1;
      },
      selectableFn(row, index) {
        // console.info(row);
        return row.id !== '1';
      }
    },
    watch: {
      imageList() {
        if (this.imageList.length > 3) {
          document.querySelector('.el-upload').style.display = 'none';
        } else {
          document.querySelector('.el-upload').style.display = 'inline-block';
        }
      }
    }
  };
</script>
